デザインシステム構築の様々なアプローチ - freee
https://scrapbox.io/files/6304b1415ab346001d32295c.png
エンジニア → デザイナーのキャリア
https://scrapbox.io/files/6304b162f3165c00232ad535.png
https://scrapbox.io/files/6304b17a2588a6001d08bd50.png
アジェンダ
freee の目指す姿と求められること
ミッション
ビジョン
目指す姿と現状のデザインシステムにあるギャップ
画面パターンに期待することと今後の取り組み
将来的にあいえる展望
https://scrapbox.io/files/6304b19cef9656001fff4427.png
torish14.icon 個人的に素敵なミッション
https://scrapbox.io/files/6304b1abe3a9ca001f575037.png
freee API を public に公開している
https://scrapbox.io/files/6304b1e9d8f247001d49fdff.png
https://scrapbox.io/files/6304b21844d670001d6088bd.png
https://scrapbox.io/files/6304b22ee93f8e0021a11eab.png
https://scrapbox.io/files/6304b236062538001f148f96.png
現在のデザインシステム等
React Component ライブラリ
Figma ライブラリ
Storybook
ドキュメント
カタログ
UI/UX ガイドライン
画面設計の指針
開発組織
https://scrapbox.io/files/6304b288bbac71002058c003.png
現状のデザインシステムや出している効果
開発生産性
挙動の一貫性・品質の担保
https://scrapbox.io/files/6304b2d1bbac71002058c5ae.png
https://scrapbox.io/files/6304b2fd031884001dd747f4.png
Storybook にあるカタログは網羅的じゃない
サンプルは載せている
https://scrapbox.io/files/6304b3584f02e8001dfd3521.png
画面パターンとして定義したいことと期待する効果
定義したいこと
期待する効果
https://scrapbox.io/files/6304b3a5dd88780023e4dc11.png
2022/8/23 以降、freee が取り組んでいくこと
画面パターンの規定
パターンを洗い出す
どのプロダクトにもある汎用的なパターン
オンボーディング
インポート
画面としての振る舞い
操作
遷移
フィードバック
パターンにする粒度の判断
torish14.icon コレ大変そう
パターンに合わせた理想の画面を再定義
https://scrapbox.io/files/6304b407d3bc15001fddcf3b.png
https://scrapbox.io/files/6304b44b44d670001d60b017.png
https://scrapbox.io/files/6304b4820afcc30021482d3d.png